:root {
  // Font related properties
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-base: 1rem; // 16px
  --font-size-sm: 0.875rem; // 14px
  --font-size-xs: 0.75rem; // 12px
  --font-size-monospace: 0.95em;

  // Line height
  --line-height-base: 1.5;
  --line-height-heading: 1.2;

  // Color palette
  --white: #fff;
  --very-light-grey: #f8f8f8;
  --light-grey: #eaeff2;
  --medium-grey: #9ba7af;
  --dark-grey: #4d545d;
  --black: #333;

  // branding
  --primary: #0b6aa2;
  --secondary: #4d545d;
  --success: #138347;
  --danger: #cc0003;
  --warning: #ea6b19;
  --focus: #3fb3f7;

  // State colors
  --primary-hover: #0587d4;
  --primary-active: #095683;
  --danger-hover: #eb383b;
  --danger-active: #b50003;

  // Background colors
  --background: var(--white);

  // Borders
  --line-green: #acb;
  --medium-translucent: rgba(255, 255, 255, 0.75);

  // Page header colors
  --logo-bg: var(--white);
  --brand-link-color: var(--secondary);
  --header-link-color: var(--white);
  --header-link-color-active: #f5f5f5;
  --header-link-outline: var(--focus);
  --header-search-border: var(--white);
  --search-input-color: var(--brand-link-color);
  --search-bg: var(--white);
  --search-box-completion-bg: var(--primary-hover);
  --search-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);

  // Header classic colors
  --header-bg-classic: #000;
  --header-link-bg-classic-hover: #404040;
  --header-link-bg-classic-active: #404040;

  // Header new UI colors
  --header-bg-v2: var(--primary-hover);
  --brand-link-color-hover-v2: var(--primary-hover);
  --brand-link-color-active-v2: var(--primary-active);
  --header-link-bg-hover-v2: var(--primary-hover);
  --header-link-bg-active-v2: var(--primary-active);

  // Header dimensions
  --header-item-border-radius: 4px;

  // Breadcrumbs and footer
  --breadcrumbs-bg: #f8f8f8;
  --breadcrumbs-border: var(--light-grey);
  --breadcrumbs-text-color: #4d545d;
  --breadcrumbs-item-bg-color--hover: var(--light-grey);

  // Monitor / bell-alert new colors
  --monitor-bg-v2: #f8d7da;
  --monitor-color-v2: #721c24;

  // Alert banners
  // Default
  --alert-default-icon-color: #2196f3;
  --alert-default-bg-color: #d1ecf1;
  --alert-default-border-color: #bee5eb;
  --alert-default-color: #0c5464;

  // Success
  --notification-success-icon-color: #4caf50;
  --notification-success-bg-color: #d4edda;
  --notification-success-border-color: #c3e6cb;
  --notification-success-color: var(--success);

  // Warning
  --notification-warning-icon-color: #ff9800;
  --notification-warning-bg-color: #fff3cd;
  --notification-warning-border-color: #ffeeba;
  --notification-warning-color: #856404;

  // Error
  --notification-error-icon-color: #f44336;
  --notification-error-bg-color: #f8d7da;
  --notification-error-border-color: #f5c6cb;
  --notification-error-color: #721c24;

  // Alert call outs
  --alert-success-text-color: #155724;
  --alert-success-bg-color: #d4edda;
  --alert-success-border-color: #c3e6cb;
  --alert-info-text-color: #31708f;
  --alert-info-bg-color: #d9edf7;
  --alert-info-border-color: #bce8f1;
  --alert-warning-text-color: #8a6d3b;
  --alert-warning-bg-color: #fcf8e3;
  --alert-warning-border-color: #faebcc;
  --alert-danger-text-color: #a94442;
  --alert-danger-bg-color: #f2dede;
  --alert-danger-border-color: #ebccd1;

  // Typography
  --text-color: var(--black);
  --text-color-secondary: var(--secondary);

  // Buttons
  --btn-primary-bg: var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  --btn-primary-bg-active: var(--primary-active);
  --btn-secondary-color: var(--secondary);
  --btn-secondary-bg: var(--btn-text-color);
  --btn-secondary-border: var(--medium-grey);
  --btn-text-color: var(--white);
  --btn-link-bg--hover: var(--very-light-grey);
  --btn-link-bg--active: var(--light-grey);

  // Help area
  --help-area-bg-color: var(--very-light-grey);
  --configure-job-help-area-bg-color: var(--medium-translucent);

  // Table
  --even-row-color: var(--very-light-grey);
  --bigtable-border-width: var(--pane-border-width);
  --bigtable-header-bg: var(--dark-grey);
  --bigtable-header-font-weight: bold; // Does specifying this make sense
  --bigtable-header-text-color: var(--white);
  --bigtable-row-border-color: var(--medium-grey);
  --bigtable-cell-padding-x: 0.75rem;
  --bigtable-cell-padding-y: 0.5rem;
  --table-parameters-bg--hover: var(--light-grey);
  --table-striped-bg--hover: var(--light-grey);

  // Link
  --link-color: var(--primary);
  --link-visited-color: var(--link-color);
  --link-color--hover: var(--link-color);
  --link-color--active: var(--text-color);
  --link-text-decoration: none;
  --link-text-decoration--hover: underline;
  --link-text-decoration--active: underline;
  --link-font-weight: 600;
  // Dark link
  --link-dark-color: var(--text-color);
  --link-dark-visited-color: var(--link-dark-color);
  --link-dark-color--hover: var(--primary-hover);
  --link-dark-color--active: var(--primary-active);
  --link-dark-text-decoration: none;
  --link-dark-text-decoration--hover: underline;
  --link-dark-text-decoration--active: underline;
  --link-dark-font-weight: 600;

  // Pane
  --pane-border-width: 1px;
  --pane-header-text-color: var(--text-color);
  --pane-header-bg: var(--light-grey);
  --pane-header-border-color: var(--light-grey);
  --pane-header-font-weight: bold;
  --pane-border-color: var(--light-grey);
  --pane-text-color: var(--text-color);
  --pane-link-color: black;
  --pane-link-color--visited: black;

  // TabBar links
  --tab-link-border-radius: 4px;
  --tab-link-border-width: 2px;
  --tab-link-padding-x: 0.75rem;
  --tab-link-padding-y: 0.375rem;
  --tab-link-font-weight: bold;
  --tab-link-text-color: var(--text-color-secondary);
  --tab-link-bg: transparent;
  --tab-link-border-color: var(--light-grey);
  --tab-link-text-color--hover: var(--tab-link-text-color); // Redundant?
  --tab-link-bg--hover: var(--light-grey);
  --tab-link-border-color--hover: var(--tab-link-bg--hover); // Redundant?
  --tab-link-text-color--active: var(--tab-link-text-color); // Redundant?
  --tab-link-bg--active: var(--light-grey);
  --tab-link-border-color--active: var(--tab-link-checked-bg); // Redundant?
  --tab-link-checked-text-color: var(--white);
  --tab-link-checked-bg: var(--dark-grey);
  --tab-link-checked-border-color: var(--tab-link-checked-bg);
  // Tabbar baseline
  --tab-baseline-width: 2px;
  --tab-baseline-color: var(--light-grey);
  --tab-baseline-default-display: none;

  // Side panel
  --panel-header-bg-color: var(--light-grey);
  --panel-border-color: var(--light-grey);
  --side-panel-hover-color: var(--panel-border-color);
  --task-link-bg-color--active: var(--panel-border-color);
  --task-link-bg-color--hover: var(--very-light-grey);

  // Form
  --input-color: var(--white);
  --input-border: #ccc;
  --input-hidden-password-bg-color: #f9f9f9;

  // Pop out menus
  --menu-text-color: black;
  --menu-bg-color: var(--white);
  --menu-selected-color: #b3d4ff;
  --menu-box-shadow: 0 3px 10px #bbb;

  // Manage component
  --manage-option-bg-color--hover: var(--very-light-grey);
  --manage-option-bg-color--active: var(--light-grey);
  --manage-option-border-color: var(--medium-grey);

  // Add form widget / configure job
  --light-bg-color: #eee;
  --bright-bg-color: #f9f9f9;
  --brightest-bg-color: var(--white);
  --light-bg-color--hover: rgba(255, 255, 255, 0.65);
  --add-item-btn-decorator-border-color: #acb;
  --add-item-btn-decorator-bg-color: rgba(245, 249, 239, 0.75);
  --configure-job-bottom-sticker-bg-color: rgba(245, 249, 239, 0.75);
  --configure-job-bottom-sticker-border-color: var(--line-green);

  // Plugin manager
  --plugin-manager-bg-color-already-upgraded: var(--light-grey);
  --plugin-manager-category-link-bg-color: var(--very-light-grey);
  --plugin-manager-category-link-bg-color--hover: #f2f2f2;
  --plugin-manager-category-link-border-color: var(--medium-grey);
  --plugin-manager-category-link-border-color--hover: var(--black);
  --plugin-manager-category-text-color: var(--text-color);
  --plugin-manager-category-link-color--hover: var(--text-color);
  --plugin-manager-unavailable-bg-color: #f4f4f4;

  // Auto complete
  --auto-complete-bg-color--prehighlight: #b3d4ff;

  // Call to action
  --call-to-action-link-color: #000;
  --call-to-action-text-color: var(--alert-info-text-color);
}
